<!--
 * @Author: Gary 289602025@qq.com
 * @Date: 2024-03-31 21:39:50
 * @LastEditors: Gary 289602025@qq.com
 * @LastEditTime: 2024-03-31 21:39:50
 * @FilePath: \vue3-test\bak\05_vue3生命周期\Person.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    {{ num }}
    <button @click="addNum">增加</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {
    onBeforeMount,
    onBeforeUnmount,
    onBeforeUpdate,
    onMounted,
    onUnmounted,
    onUpdated,
    ref
  } from 'vue'

  let num = ref(0)

  function addNum() {
    num.value++
  }

  console.log('初始化---')

  onBeforeMount(() => {
    console.log('挂载前--')
  })

  onMounted(() => {
    console.log('挂载完毕--')
  })

  onBeforeUpdate(() => {
    console.log('更新前--')
  })

  onUpdated(() => {
    console.log('更新完毕--')
  })

  onBeforeUnmount(() => {
    console.log('卸载前--')
  })

  onUnmounted(() => {
    console.log('卸载完毕--')
  })
</script>
